<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item :label="$t('角色名称')">
              <a-input :placeholder="$t('请输入角色名称')" v-model="queryParam.roleName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="!tenantId">
            <a-form-item :label="$t('门店')">
              <a-select v-model="queryParam.tenantId">
                <a-select-option v-for="(item, i) in shops" :key="i" :value="item.value"
                  >{{ item.title }}<span v-if="item.value != ''">（{{ item.value }}）</span></a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <!--
          <a-col :md="11" :sm="12">
            <a-form-item :label="$t('创建时间')" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-date v-model="queryParam.createTime_begin" :showTime="true" date-format="YYYY-MM-DD HH:mm:ss" style="width:45%" :placeholder="$t('请选择开始时间')" ></j-date>
              <span style="width: 10px;">~</span>
              <j-date v-model="queryParam.createTime_end" :showTime="true" date-format="YYYY-MM-DD HH:mm:ss" style="width:45%" :placeholder="$t('请选择结束时间')"></j-date>
            </a-form-item>
          </a-col>
          -->
          <a-col :xl="8" :lg="9" :md="12" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('查询') }}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('重置') }}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin: 5px 0 10px">
      <a-button v-has="'OverSysRoleController:add'" @click="handleAdd" type="primary" icon="plus">{{$t('新建角色')}}</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button v-has="'OverSysRoleController:import'" type="primary" icon="import">{{$t('导入')}}</a-button>
      </a-upload>
      <a-button v-has="'OverSysRoleController:export'" type="primary" icon="download" :loading="exloading" @click="handleExportXls($t('角色管理'))">{{$t('导出')}}</a-button>
    </div>

    <div style="margin-top: 15px">
      <a-table
        style="height: 500px"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <span v-if="record.roleCode != 'Center_Manage'">
            <a v-has="'SysPermissionController:auth'" v-if="record.roleCode != 'manage' || !tenantId" @click="handlePerssion(record.id)">{{
              $t('授权')
            }}</a>
            <a-divider  v-has="'SysPermissionController:auth'" type="vertical" v-if="record.roleCode != 'manage' || !tenantId" />
            <a  v-has="'OverSysRoleController:edit'" @click="handleEdit(record)">{{ $t('编辑') }}</a>
            <a-divider
              v-has="'OverSysRoleController:edit'"
              type="vertical"
              v-if="
                record.roleCode != 'bar' &&
                record.roleCode != 'stock' &&
                record.roleCode != 'finance' &&
                record.roleCode != 'manage' &&
                record.roleCode != 'Bar_Manage' &&
                record.roleCode != 'Shop_Manage' &&
                record.roleCode != 'Operation_Manage' &&
                record.roleCode != 'admin'
              "
            />
            <a-popconfirm :title="$t('确定删除吗?')" @confirm="() => handleDelete1(record.id)">
              <a
                v-has="'OverSysRoleController:delete'"
                v-if="
                  record.roleCode != 'bar' &&
                  record.roleCode != 'stock' &&
                  record.roleCode != 'finance' &&
                  record.roleCode != 'manage' &&
                  record.roleCode != 'Bar_Manage' &&
                  record.roleCode != 'Shop_Manage' &&
                  record.roleCode != 'Operation_Manage' &&
                  record.roleCode != 'admin'
                "
                >{{ $t('删除') }}</a
              >
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </div>
    <!-- 右侧的角色权限配置 -->
    <user-role-modal ref="modalUserRole"></user-role-modal>
    <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
  </a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, postAction, getAction } from '@/api/manage'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { filterObj } from '@/utils/util'
import RoleModal from './modules/RoleModal'
import UserRoleModal from './modules/UserRoleModal'
import moment from 'moment'
import Vue from 'vue'

export default {
  name: 'RoleUserList',
  mixins: [JeecgListMixin],
  components: {
    UserRoleModal,
    RoleModal,
    moment,
  },
  data() {
    return {
      model1: {},
      model2: {},
      currentRoleId: '',
      queryParam: {
        tenantId:''
      },
      queryParam2: {},
      dataSource2: [],
      ipagination2: {
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + this.$t('sum-total',{total:total})
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      isorter2: {
        column: 'createTime',
        order: 'desc',
      },
      filters2: {},
      loading2: false,
      selectedRowKeys1: [],
      selectedRowKeys2: [],
      selectionRows1: [],
      selectionRows2: [],
      test: {},
      rightcolval: 0,
      columns: [
        {
          title: this.$t('门店编码'),
          align: 'center',
          sorter: true,
          dataIndex: 'tenantId',
        },
        {
          title: this.$t('门店名称'),
          align: 'center',
          dataIndex: 'tenantId_dictText',
        },
        {
          title: this.$t('角色编码'),
          align: 'center',
          dataIndex: 'roleCode',
        },
        {
          title: this.$t('角色名称'),
          align: 'center',
          dataIndex: 'roleName',
        },
        {
          title: this.$t('创建时间'),
          dataIndex: 'createTime',
          align: 'center',
          sorter: true,
          customRender: (text) => {
            return moment(text).format('YYYY-MM-DD')
          },
        },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      columns2: [
        {
          title: this.$t('用户账号'),
          align: 'center',
          dataIndex: 'username',
          width: 120,
        },
        {
          title: this.$t('用户名称'),
          align: 'center',
          width: 100,
          dataIndex: 'realname',
        },
        {
          title: this.$t('状态'),
          align: 'center',
          width: 80,
          dataIndex: 'status_dictText',
        },

        {
          title: this.$t('操作'),
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 120,
        },
      ],

      // 高级查询参数
      superQueryParams2: '',
      // 高级查询拼接条件
      superQueryMatchType2: 'and',
      url: {
        list: '/sys/role/list',
        delete: '/sys/role/delete',
        list2: '/sys/user/userRoleList',
        addUserRole: '/sys/user/addSysUserRole',
        delete2: '/sys/user/deleteUserRole',
        deleteBatch2: '/sys/user/deleteUserRoleBatch',
        exportXlsUrl: 'sys/role/exportXls',
        importExcelUrl: 'sys/role/importExcel',
      },
      tenantId:Vue.ls.get("TENANT_ID"),
      shops:[]
    }
  },
  created() {
    if(!this.tenantId){
      initDictOptions('bis_shop,name,code').then((res) => {
        if (res.success) {
          this.shops = res.result
          this.shops.unshift({ value: '', title: this.$t('全部') })
        }
      })
    }
    if(this.tenantId){
      this.columns = this.columns.filter((o) => {
	      return o.dataIndex != 'tenantId' && o.dataIndex != 'tenantId_dictText'
	    })
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    leftColMd() {
      return this.selectedRowKeys1.length === 0 ? 24 : 12
    },
    rightColMd() {
      return this.selectedRowKeys1.length === 0 ? 0 : 12
    },
  },
  methods: {
    onSelectChange2(selectedRowKeys, selectionRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectionRows2 = selectionRows
    },
    onClearSelected2() {
      this.selectedRowKeys2 = []
      this.selectionRows2 = []
    },
    onClearSelected1() {
      this.selectedRowKeys1 = []
      this.selectionRows1 = []
    },
    onSelectChange1(selectedRowKeys, selectionRows) {
      this.rightcolval = 1
      this.selectedRowKeys1 = selectedRowKeys
      this.selectionRows1 = selectionRows
      this.model1 = Object.assign({}, selectionRows[0])
      console.log(this.model1)
      this.currentRoleId = selectedRowKeys[0]
      this.loadData2()
    },
    onClearSelected() {},

    getQueryParams2() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams2) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
        sqp['superQueryMatchType'] = this.superQueryMatchType2
      }
      var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
      param.field = this.getQueryField2()
      param.pageNo = this.ipagination2.current
      param.pageSize = this.ipagination2.pageSize
      return filterObj(param)
    },
    getQueryField2() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns2.forEach(function (value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    handleEdit2: function (record) {
      this.$refs.modalForm2.title = this.$t('编辑')
      this.$refs.modalForm2.roleDisabled = true
      this.$refs.modalForm2.edit(record)
    },
    handleAdd2: function () {
      if (this.currentRoleId == '') {
        this.$message.error(this.$t('请选择一个角色'))
      } else {
        this.$refs.modalForm2.roleDisabled = true
        this.$refs.modalForm2.title = this.$t('新增')
        this.$refs.modalForm2.edit({ activitiSync: '1', userIdentity: 1, selectedroles: this.currentRoleId })
      }
    },
    modalFormOk2() {
      // 新增/修改 成功时，重载列表
      this.loadData2()
    },
    loadData2(arg) {
      if (!this.url.list2) {
        this.$message.error(this.$t('请设置url.list2属性'))
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination2.current = 1
      }
      if (this.currentRoleId === '') return
      let params = this.getQueryParams2() //查询条件
      params.roleId = this.currentRoleId
      this.loading2 = true
      getAction(this.url.list2, params).then((res) => {
        if (res.success) {
          this.dataSource2 = res.result.records
          this.ipagination2.total = res.result.total
        }
        this.loading2 = false
      })
    },
    handleDelete1: function (id) {
      this.handleDelete(id)
      this.dataSource2 = []
      this.currentRoleId = ''
    },
    handleDelete2: function (id) {
      if (!this.url.delete2) {
        this.$message.error(this.$t('请设置url.delete2属性'))
        return
      }
      var that = this
      deleteAction(that.url.delete2, { roleId: this.currentRoleId, userId: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData2()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    batchDel2: function () {
      if (!this.url.deleteBatch2) {
        this.$message.error(this.$t('请设置url.deleteBatch2属性'))
        return
      }
      if (this.selectedRowKeys2.length <= 0) {
        this.$message.warning(this.$t('请选择一条记录'))
        return
      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys2.length; a++) {
          ids += this.selectedRowKeys2[a] + ','
        }
        var that = this
        console.log(this.currentDeptId)
        this.$confirm({
          title: this.$t('确认删除'),
          content: this.$t('是否删除选中数据?'),
          okText: this.$t("确定"),
          cancelText: this.$t("取消"),
          onOk: function () {
            deleteAction(that.url.deleteBatch2, { roleId: that.currentRoleId, userIds: ids }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData2()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
        })
      }
    },
    selectOK(data) {
      let params = {}
      params.roleId = this.currentRoleId
      params.userIdList = []
      for (var a = 0; a < data.length; a++) {
        params.userIdList.push(data[a])
      }
      console.log(params)
      postAction(this.url.addUserRole, params).then((res) => {
        if (res.success) {
          this.loadData2()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    handleAddUserRole() {
      if (this.currentRoleId == '') {
        this.$message.error(this.$t('请选择一个角色'))
      } else {
        this.$refs.selectUserModal.visible = true
      }
    },
    handleOpen(record) {
      this.rightcolval = 1
      this.selectedRowKeys1 = [record.id]
      this.model1 = Object.assign({}, record)
      this.currentRoleId = record.id
      this.onClearSelected2()
      this.loadData2()
    },
    searchQuery2() {
      this.loadData2(1)
    },
    searchReset2() {
      this.queryParam2 = {}
      this.loadData2(1)
    },
    handleTableChange2(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter2.column = sorter.field
        this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination2 = pagination
      this.loadData2()
    },
    hideUserList() {
      //this.rightcolval = 0
      this.selectedRowKeys1 = []
    },
    handlePerssion(roleId) {
      this.$refs.modalUserRole.show(roleId)
    },
    searchReset(){
      this.queryParam={
        tenantId:''
      }
      this.searchQuery()
    }
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>